<!--
 * @创建文件时间: 2021-11-19 22:29:21
 * @Auther: 猿小天
 * @最后修改人: 猿小天
 * @最后修改时间: 2021-11-20 09:36:45
 * 联系Qq:1638245306
 * @文件介绍: app版本管理
-->
<template>
  <d2-container type='full' :class="{ 'page-compact': crud.pageOptions.compact }">
    <template slot="header">
      <div>
        <el-row>
          <el-button>模块信息</el-button>
          <el-button type="plain" @click="replacePage">成员信息</el-button>
          当前项目：
          <el-select v-model="project" clearable filterable :placeholder="`${$route.query.name?$route.query.name:'请选择'}`">
            <el-option
              v-for="item in projects"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          </el-row>
      </div>
    </template>
    <el-dialog
        title="版本发布"
        :visible.sync="this.show"
        width="50%"
        :before-close="handleClose">
        <el-form :model="form">
          <el-form-item label="项目名称" :label-width="formLabelWidth">
              <el-input v-model="form.project" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="模块名字" :label-width="formLabelWidth">
              <el-input v-model="form.module_name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="模块别名" :label-width="formLabelWidth">
              <el-input v-model="form.alias_name" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布环境" :label-width="formLabelWidth">
            <el-select v-model="form.env" placeholder="发布环境">
              <el-option label="灰度环境" value="pre"></el-option>
              <el-option label="正式环境" value="prod"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布参数" :label-width="formLabelWidth">
              <el-input v-model="form.params" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="发布版本" :label-width="formLabelWidth">
              <el-input v-model="form.version" placeholder="版本号，务必和git分支或者标签完全一致" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="版本说明" :label-width="formLabelWidth">
              <el-input v-model="form.description" placeholder="版本号，务必和git分支或者标签完全一致" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="doTask">发 布</el-button>
        </span>
      </el-dialog>
    <d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners" @deploy-task="deployTask">
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button size="small" type="primary" @click="addRow"
            ><i class="el-icon-plus" /> 增加</el-button>
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <template slot="createBtnFormSlot" slot-scope="scope">
        <el-button
          :disabled="scope.mode === 'view'"
          icon="el-icon-plus"
          type="primary"
          circle
          @click="onLinkBtn"
        ></el-button>
      </template>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import { GetList } from '@/views/ops/config/project/project_info/api'
export default {
  name: 'module_manage',
  mixins: [d2CrudPlus.crud],
  mounted () {
    // 一进页面就加载
    this.getProjectList()
    this.form.env = 'pre'
  },
  data () {
    return {
      project: '',
      projects: [],
      show: false,
      formLabelWidth: '120px',
      form: { env: 'pre' }
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      const forkeyId = this.$route.query.project
      return api.GetList({ ...query, project: this.project ? this.project : forkeyId })
    },
    addRequest (row) {
      const forkeyId = this.$route.params.project
      return api.createObj(row, forkeyId)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    // 跳转到添加按钮界面
    onLinkBtn () {
      this.$router.push({ path: '/button' })
    },
    // 获取项目列表
    getProjectList () {
      GetList().then(res => {
        this.projects = res.data.data
      })
    },
    // 替换页面
    replacePage () {
      this.$router.push({ path: '/project/project_members', query:{project_belong: this.$route.query.name} })
    },
    // 加载发布界面
    deployTask ({ row }) {
      this.show = true
      this.form = row
    },
    // 执行发布
    async doTask (data) {
      await api.TaskDeploy(this.form)
      this.show = false
      // alert('发布中，请等待！')
      await this.$alert('发布中，请等待', '提示信息', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${ action }`
          });
        }
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.show = false
          // done();
        })
        .catch(_ => {});
    }

  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
